<!DOCTYPE html>
<html lang="cn-ZH">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签第二部分到05</title>
</head>
<body>
<h2 align="center">一、表格标签</h2>
<h3>（一）表格的基本使用</h3>
不是用来布局页面，而是用来展示数据的,没有列概念，1包含2包含3.<br>
1.table&nbsp;/table:表格标签<br>
2.tr&nbsp;/tr:行标签<br>
3.td&nbsp;/td:单元格标签<br>
<table>
    <tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
    <tr><td>xxx</td> <td>男</td> <td>30</td></tr>
    <tr><td>xx</td> <td>男</td> <td>29</td></tr>
    <tr><td>xxx</td> <td>女</td> <td>31</td></tr>
</table>
<h3>（二）表头标签</h3>
1.th&nbsp;/th:表头标签(居中并加粗)
<table>
    <tr><th>姓名</th> <th>性别</th> <th>电话</th></tr>
    <tr><td>xxx</td> <td>男</td> <td>111111</td></tr>
    <tr><td>xx</td> <td>男</td> <td>222222</td></tr>
    <tr><td>xxx</td> <td>女</td> <td>222222</td></tr>
</table>
<h3>（三）表格属性</h3>
实际开发不常用，后面用CSS来设置都可直接实现<br>
1.这些标签要写的表格标签table里面去！<br>
2.记住单词，后面CSS会用<br>
3.直观感受表格外观状态<br>
<table cellspacing="0" align="center" border="1" cellpadding="5" width="800" height="50">
    <tr><th>属性名</th> <th>属性值</th> <th>描述</th></tr>
    <tr><td>align</td> <td>left(左)、center（中）、right（右）</td> <td>规定表格相对周围元素的对齐方式</td></tr>
    <tr><td>border</td> <td>1或“”</td> <td>规定表格单元格拥有边框，默认是“”，表示无边框</td></tr>
    <tr><td>cellpadding</td> <td>像素值</td> <td>规定单元边沿与其内容之间的空白，默认1像素</td></tr>
    <tr><td>cellspacing</td> <td>像素值</td> <td>规定单元格之间的空白，默认2像素</td></tr>
    <tr><td>width</td> <td>像素值或百分比</td> <td>规定表格宽度</td></tr>
    <tr><td>height</td> <td>像素值或百分比</td> <td>规定表格高度</td></tr>
</table>
<h3>（练习）实际操作：小说排行榜</h3>
<table align="center" cellspacing="0" border="1" width="500" height="249">
    <tr>
        <th>排名</th> 
        <th>关键词</th> 
        <th>趋势</th> 
        <th>今日搜索</th> 
        <th>最近七日</th> 
        <th>相关链接</th>
    </tr>
    <tr>
        <td>1</td> 
        <td>鬼吹灯</td> 
        <td><img src="二（小说练习）/down.png" width="10"></td> 
        <td>345</td> 
        <td>123</td> 
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>2</td> 
        <td>盗墓笔记</td> 
        <td><img src="二（小说练习）/down.png" width="10"></td> 
        <td>124</td> 
        <td>675432</td> 
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>3</td> 
        <td>西游记</td> 
        <td><img src="二（小说练习）/up.png" width="8"></td> 
        <td>212</td> 
        <td>7654</td> 
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>4</td> 
        <td>东游记</td> 
        <td><img src="二（小说练习）/up.png" width="8"></td> 
        <td>23</td> 
        <td>75645</td> 
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>5</td> 
        <td>甄嬛传</td> 
        <td><img src="二（小说练习）/down.png" width="10"></td> 
        <td>121</td> 
        <td>7676</td> 
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>6</td> 
        <td>水浒传</td> 
        <td><img src="二（小说练习）/up.png" width="8"></td> 
        <td>576576</td> 
        <td>1231421</td> 
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>7</td> 
        <td>三国演义</td> 
        <td><img src="二（小说练习）/up.png" width="8"></td> 
        <td>234</td> 
        <td>7686</td> 
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
</table>
<h3>（四）表格结构标签</h3>
1.thead：头部区域；tbody：表格主题区域
<table> 
<thead>
    <tr>
        <th>姓名</th> 
        <th>性别</th> 
        <th>电话</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>xxx</td> 
        <td>男</td> <td>111111</td>
    </tr>
    <tr>
        <td>xx</td> 
        <td>男</td> <td>222222</td>
    </tr>
    <tr>
        <td>xxx</td> 
        <td>女</td> <td>222222</td>
    </tr>
</tbody>
</table>
<h3>（五）合并单元格</h3>
1.合并单元格方式:跨行合并rowspan=“个数”；跨列合并colspan=“个数”<br>
2.目标单元格：跨行：最上侧单元格写合并代码；跨列：最左侧单元格写合并代码<br>
3.合并步骤：确定跨行还是跨列→找目标单元格写合并代码：英文=“数量”→删除多余单元格
<table cellspacing="0" border="1" width="500" height="249">
<tbody>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>    
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>   
    <tr>
        <td></td>
        <td></td>
    </tr>
</tbody>
</table>
<h2 align="center">二、列表标签</h2>
特点：整齐布局，自由方便。分三大类：无序列表、有序列表、自定义列表
<h3>（一）无序列表（重点）</h3>
1.ul双标签表示无序列表，里面列表项使用：li双标签<br>
2.ul标签中只能出现li标签！其他标签不允许放。但li标签中可以放任何元素<br>
3.无序列表带有自己的样式属性，实际中基本都用CSS来设置
<h4>喜欢的食物</h4>
<ul>
    <li>草莓</li>
    <li>葡萄</li>
    <li>苹果</li>
</ul>
<h3>（二）有序列表（理解）</h3>
1.ol来双标签来表示有序列表，里面列表项使用：li双标签<br>
2.ol标签中只能出现li标签！其他标签不允许放。但li标签中可以放任何元素<br>
3.有序列表带有自己的样式属性，实际中基本都用CSS来设置
<h4>粉丝排行榜</h4>
<ol>
    <li>xxx 10000</li>
    <li>xx 8000</li>
    <li>xx 5000</li>
</ol>
<h3>（三）自定义列表（重点）</h3>
多用于对术语或名词来进行解释，列标项前没有任何项目符合<br>
1.dl双标签表述自定义列表，dt双标签为项目术语或名词，dd双标签为项目的的解析，二者一起使用<br>
2.dl只能包含dt、dd，其他标签不允许放。但dt和dd标签中可以放任何元素<br>
3.dt和dd可以多放置，一般一个dt对应若干dd<br>
4.自定义列表带有自己的样式属性，实际中基本都用CSS来设置
<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
    <dt>特殊服务</dt>
    <dd>售后政策</dd>
    <dd>自助服务</dd>
    <dd>相关下载</dd>
</dl>
<h2 align="center">三、表单标签</h2>
目的：收集用户信息；组成：表单域、表单控件（表单元素）、提示信息
<h3>（一）表单域（要知道form双标签理论，服务器学习会用到）</h3>
form双标签来表示表单域，会把单位内的表单元素信息提交服务器<br>
1.action=url地址：用于接收处理表单数据的服务器程序的url地址<br>
2.method=提交方式get/post:用于设置表单数据的提交方式，取值为get/post<br>
3.name=表单域名称：以区分同一页面中的多个表单域
<form action="demo.php" method="POST" name="name1">
</form>
<h3>（二）表单控件（表单元素）</h3>
1.（1）input单标签（输入表单元素）:input type="属性值"<br>
    包含一个type属性（值来指定不同的控件类型），如：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等<br>
<table border="1" cellspacing="0">
    <tr>
        <th>属性值</th> <th>描述</th>
    </tr>
    <tr>
        <td>button</td> <td>定义可点击按钮（多数通过JS启动脚本）</td>
    </tr>    
    <tr>
        <td>checkbox</td> <td>定义复选框</td>
    </tr>
    <tr>
        <td>file</td> <td>定义输入字段和“浏览”按钮，供文件上传</td>
    </tr>    
    <tr>
        <td>hidden</td> <td>用于隐藏的输入字段</td>
    </tr>
    <tr>
        <td>image</td> <td>定义图像形式的提交按钮</td>
    </tr>
    <tr>
        <td>password</td> <td>定义密码字段，该字段中字符被掩码</td>
    </tr>
    <tr>
        <td>radio</td> <td>定义单选按钮</td>
    </tr>
    <tr>
        <td>reset</td> <td>定义重复按钮，重置按钮清除表单中所有数据</td>
    </tr>
    <tr>
        <td>submit</td> <td>定义提交按钮，把表单数据发送到服务器</td>
    </tr>
    <tr>
        <td>text</td> <td>定义单行输入字段，在其中输入文本，默认20个字符</td>
</table>
（2）input内的其他属性，常用如：<br>
name=自定义:定义input元素名称（单选按钮和复选框要所定义的相同值，便于后台查看所选值）<br>
value=自定义:规定input元素值（便于后台查看所选值）<br>
checked=checked:规定此input元素首次加载时应当被选中（单选和复选框可以设置）<br>
maxlength=正整数:规定输入字段中字符的最大长度<br>
(3)label双标签：为input绑定一个表单元素定义标注，光标会直接选中对应的表单元素，增加用户体验<br>
1.for属性和id属性应当相同元素<br>
<form action="xxx.php" method="GET" target="_blank">
        <label for="text">用户名：</label>
    <input type="text" name="username" value="请输入用户名" maxlength="8" id="text">(最多可输入8位)<br>
        <label for="password">密码：</label>
    <input type="password" name="password" maxlength="6" id="password">（最多输入6位）<br>
    性别：<input type="radio" name="sex" value="sex" id="nan">
        <label for="nan">男</label>
        <input type="radio" name="sex" value="sex" id="nv">
        <label for="nv">女</label><br>
    爱好：<input type="checkbox" name="hobby" value="抽烟" id="chouyan">
    <label for="chouyan">抽烟</label>  
        <input type="checkbox" name="hobby" value="喝酒" id="hejiu">
        <label for="hejiu">喝酒</label>  
        <input type="checkbox" name="hobby" value="烫头" id="tangtou">
        <label for="tangtou">烫头</label><br>
    上传照片：<input type="file"><br>
    手机：<input type="text" name="tele" value="请输入手机号" maxlength="11"><input type="button" value="获取短信验证码"><br>
    <input type="submit" value="立即注册">
    <input type="reset" value="重新填写"><br>
    <input type="checkbox" name="agree" value="我已同意注册" checked=checked>我已同意注册
</form>
2.select（下拉表单元素）<br>
（1）语义：双标签，包含form之中的。若有多选项时且想节约空间。<br>
（2）select中至少包含一个option。<br>
（1）在option中若想设置默认显示，selected=selected。<br>
<form>
籍贯：<select>
    <option>山东</option>
    <option>上海</option>
    <option>北京</option>
    <option>四川</option>
    <option selected=selected>请选择...</option>
</select>
</form>
3.textarea（文本域元素）<br>
（1）语义：双标签，创建多行文本输入框，如留言板，评论之类。<br>
（2）cols=每行中的字符数，rows=显示的行数，实际开发不太用，多用CSS来改变大小。<br>
<form>
    今日反馈：<textarea cols="50" rows="5">请输入留言...</textarea>
</form>






</body>
</html>